<template>
<el-row>
    <el-col :span="8">
        <el-card class="box-card-user">
            <div id="user">
                <img :src="userPic" alt="">
                <div id="userInfo">
                    <span class="Striking">Admin</span>
                    <span class="Secondary">超级管理员</span>
                </div>
            </div>
            <div id="lognInfo">
                <p>上次登陆时间：<span>公元前384年-4月-11日</span></p>
                <p>上次登陆地点：<span>赵国-邯郸</span></p>
            </div>
        </el-card>
        <el-card class="box-card-table">
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column
                    prop="name"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="kills"
                    label="今日杀敌数">
                </el-table-column>
                <el-table-column
                    prop="altogether"
                    label="总杀敌数">
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="等级">
                </el-table-column>
            </el-table>
        </el-card>
    </el-col>
    <el-col :span="16">
        <div id="for-card-box">
            <el-card v-for="(item, index) in countData" :key="index" class="box-card-count" body-style="padding: 0;display: flex;">
                <div class="iconBox" :style="`background-color: ${item.color};`">
                    <i :class="item.icon"></i>
                </div>
                <div class="info">
                    <p class="Striking">{{ item.value }}</p>
                    <p class="Secondary">{{ item.label }}</p>
                </div>
            </el-card>
        </div>
        <el-card class="box-card-LineChart" body-style="padding: 0;">
            <!-- <div id="echartsDom" style="height: 320px;" ref="echartsDom"></div> -->
            <echartsVue style="height: 280px;" :chartData="echartData.onder"/>
        </el-card>
        <div id="chart-card-box">
            <el-card class="box-card-chart" body-style="padding: 0;">
                <!-- <div id="userEchartsDom" style="height: 220px;" ref="userEchartsDom"></div> -->
                <echartsVue style="height: 240px;" :chartData="echartData.user"/>
            </el-card>
            <el-card class="box-card-chart" body-style="padding: 0;">
                <!-- <div id="videoEchartsDom" style="height: 220px;" ref="videoEchartsDom"></div> -->
                <echartsVue style="height: 240px;" :chartData="echartData.video" :isAxisChar="false"/>
            </el-card>
        </div>
    </el-col>
</el-row>
</template>

<script>
// import * as echarts from 'echarts'
import echartsVue from '@/components/echarts/index.vue'
import { homeData } from '@/api/api'
export default {
    name:'Home',
    data(){
        return {
            userPic:require('../../assets/images/userPic.jpg'), // 用户头像
            tableData:[], // 表格数据
            countData:[], // 卡片数据
            echartsData:{}, // 图表数据
            echartData:{ // 图标配置数据
                onder:{
                    xData:[],
                    series:[],
                },
                user:{
                    xData:[],
                    series:[],
                },
                video:{
                    series:[],
                },
            },
        }
    },
    mounted(){
        homeData().then(res =>{
            this.tableData = res.tableData
            this.countData = res.countData
            this.echartsData = res.echartsData

            const onder = this.echartsData
            // 折线图数据及配置
            const keyArray = Object.keys(onder.data[0])
            const series = []
            keyArray.forEach(key =>{
                series.push({
                    name: key,
                    data: onder.data.map(item => item[key]),
                    type: 'line',
                })
            })

            // const option = {
            //     xAxis:{
            //         data: onder.date
            //     },
            //     yAxis:{},
            //     legend:{
            //         data: keyArray,
            //         textStyle: { color: "#FFFDFE" },
            //     },
            //     series
            // }

            this.echartData.onder.xData = onder.date
            this.echartData.onder.series = series

            // const echartsDom = echarts.init(this.$refs.echartsDom)
            // echartsDom.setOption(option)

            // 柱状图数据及配置
            // const UserOption = {
            //     legend:{
            //         textStyle: { color: "#FFFDFE" }, // 图例文字颜色
            //     },
            //     grid:{
            //         left: '20%',
            //     },
            //     tooltip:{ // 提示框
            //         trigger: 'axis',
            //     },
            //     xAxis:{
            //         type: 'category',
            //         data: onder.userData.map(item => item.date),
            //         axisLine:{
            //             lineStyle:{
            //                 color: '#17b3a3',
            //             },
            //         },
            //         axisLabel:{
            //             interval: 0,
            //             color: '#333'
            //         },
            //     },
            //     yAxis:[
            //         {
            //             type: 'value',
            //             axisLine:{
            //                 lineStyle:{
            //                     color: '#17b3a3',
            //                 },
            //             },
            //         },
            //     ],
            //     color:['#2ec7c9', '#b6a2de'],
            //     series:[
            //         {
            //             name: '新增士兵',
            //             data: onder.userData.map(item => item.new),
            //             type: 'bar',
            //         },
            //         {
            //             name: '杀敌士兵',
            //             data: onder.userData.map(item => item.active),
            //             type: 'bar',
            //         },
            //     ]
            // }

            // const userEcharts = echarts.init(this.$refs.userEchartsDom)
            // userEcharts.setOption(UserOption)

            this.echartData.user.xData = onder.userData.map(item => item.date),
            this.echartData.user.series = [
                {
                    name: '新增士兵',
                    data: onder.userData.map(item => item.new),
                    type: 'bar',
                },
                {
                    name: '杀敌士兵',
                    data: onder.userData.map(item => item.active),
                    type: 'bar',
                },
            ]

            // 饼图数据及配置
            const videoOption = {
                tooltip:{
                    trigger:"item",
                },
                color:[
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series:{
                    data: this.tableData.map(item =>{
                        const obj = {
                            name: item.name,
                            value: item.altogether
                        }

                        return obj
                    }),
                    type:'pie'
                },
            }

            // const videoEcharts = echarts.init(this.$refs.videoEchartsDom)
            // videoEcharts.setOption(videoOption)

            this.echartData.video.series = {
                data: this.tableData.map(item =>{
                    const obj = {
                        name: item.name,
                        value: item.altogether
                    }

                    return obj
                }),
                type:'pie'
            }
        })
    },
    components:{ echartsVue },
}
</script>

<style scoped>
.box-card-user{
    width: calc(100% - 20px);
    height: 260px;
    margin: 0 auto;
}
.box-card-user #user{
    display: flex;
}
.box-card-user #user>img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.box-card-user #user>#userInfo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
}
.box-card-user #user>#userInfo>span{
    margin: 5px 0;
}
.box-card-user #lognInfo{
    width: 100%;
    height: 80px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid #9499a0;
}
.box-card-user #lognInfo p{
    color: #9499a0;
    margin: 4px 0;
    position: relative;
    top: 10px;
    font-size: 14px;
}
.box-card-user #lognInfo p>span{
    color: #cfd2d9;
}

.box-card-table{
    margin: 20px auto 0 auto;
    width: calc(100% - 20px);
    height: 460px;
}

#for-card-box{
    margin: 0 auto;
    width: calc(100% - 0px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.box-card-count{
    width: calc(33.33333% - 20px);
    height: 80px;
    margin: 0 10px 20px 10px;
}
.box-card-count .iconBox{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.box-card-count .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
}

.box-card-LineChart{
    width: calc(100% - 20px);
    height: 280px;
    margin: 0 auto 0 auto;
}

#chart-card-box{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.box-card-chart{
    width: calc(50% - 20px);
    height: 240px;
    margin: 0 auto;
}

.Striking{
    font-size: 24px;
    color: #cfd2d9;
}
.Secondary{
    font-size: 14px;
    color: #b1b7bf;
}
</style>